<template>
  <base-breadcrumb :title="titleName">
    <searchData
      :search-data="searchArr"
      @search="search"
    />

    <a-card :bordered="false">
      <!-- <title-name title="设计变更列表" /> -->
      <list-table
        ref="table"
        :request="loadData"
        :columns="columns"
        :statistics-config="{ use: true, statistics, temp }"
        :exportConfig="{ use: true,select: '导出选中',all: '导出全部'}"
      >
        <template slot="prefix">
          <a-button
            v-btnPermission="[{code:'seex_ds_004_add_01',ident:'prma_seex'},{code:'buco_ds_004_add_01',ident:'prma_buco'}]"
            type="primary"
            @click="handelAdd"
          >
            新增设计变更
          </a-button>
        </template>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="description" slot-scope="text">
          <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
        </span>
<!--        <template slot="statusCode" slot-scope="text, record">-->
<!--          <StatusDisplay :status-map="statusMap" :status-code="record.statusCode" />-->
<!--        </template>-->
        <div  slot="operation" slot-scope="text, record">
          <MoreButton>
          <a v-btnPermission="[{code:'seex_ds_004_loo_02',ident:'prma_seex'},{code:'buco_ds_004_loo_02',ident:'prma_buco'}]" @click="handleDels(record)">查看</a>
          <a v-if="record.statusCode == '0' || record.statusCode == '2'" v-btnPermission="[{code:'seex_ds_004_edi_03',ident:'prma_seex'},{code:'buco_ds_004_edi_03',ident:'prma_buco'}]"
                @click="handleEdit(record)"
          >编辑</a>
          <a v-if="record.statusCode == '3'" v-btnPermission="[{code:'seex_ds_004_rec_05',ident:'prma_seex'},{code:'buco_ds_004_rec_05',ident:'prma_buco'}]" @click="handleRecord(record)"
          >变更记录</a>
          <a v-if="record.statusCode != '0'" v-btnPermission="[{code:'seex_ds_004_moi_06',ident:'prma_seex'},{code:'buco_ds_004_moi_06',ident:'prma_buco'}]" @click="handleApproveDetail(record)"
          >审批信息</a>
          </MoreButton>
        </div>
      </list-table>

      <!-- 审批详情 -->
      <ApprovalDetails
        :title="'审批详情'"
        :business-id="businessId"
        :visible="visibleApprove"
        @cancel="visibleApprove = false"
        @confirm="visibleApprove = false"
      />
    </a-card>
  </base-breadcrumb>
</template>

<script>
import StatusDisplay from '@/components/StatusDisplay'
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getDesignChangeList, getDesignTotal, designChangeFilCommit } from '@/api/project/designChange'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import ApprovalDetails from '@/components/approvalDetails'
import ARow from 'ant-design-vue/es/grid/Row'
import Template from '@/views/construction/gantt/template.vue'
import OrgTreeSelect from '@/components/OrgTreeSelect'

const columns = [
  {
    title: '序号',
    width: '65px',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '设计变更编号',
    dataIndex: 'changeNum',
    width: '240px',
    ellipsis: true
  },
  {
    title: '设计变更名称',
    dataIndex: 'changeName',
    width: '240px',
    ellipsis: true
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    width: '120px',
    ellipsis: true
  },
  {
    title: '分公司',
    dataIndex: 'branch',
    width: '120px',
    ellipsis: true
  },
  {
    title: '项目设计管理类别',
    dataIndex: 'type',
    width: '150px',
    ellipsis: true
  },
  {
    title: '施工图设计单位',
    dataIndex: 'designUnit',
    width: '240px',
    ellipsis: true
  },
  {
    title: '施工图版本编号',
    dataIndex: 'versionNum',
    width: '150px',
    ellipsis: true
  },
  {
    title: '变更原因',
    dataIndex: 'changeReason',
    width: '120px',
    ellipsis: true
  },
  {
    title: '变更类型',
    dataIndex: 'changeType',
    width: '240px',
    ellipsis: true
  },
  {
    title: '变更费用(万)',
    width: '120px',
    dataIndex: 'changeCost'
  },
  {
    title: '状态',
    width: '120px',
    dataIndex: 'statusName',
    scopedSlots: { customRender: 'statusCode' }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: 200,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    Ellipsis,
    ApprovalDetails,
    StatusDisplay
  },
  data() {
    this.columns = columns
    return {
      businessId: '',
      visibleApprove: false,
      searchArr: [
        // 搜索框
        {
          name: '设计变更名称',
          value: 'changeName',
          type: 'input'
        },
        // {
        //   name: '项目名称',
        //   value: 'projectName',
        //   type: 'input'
        // },
        {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
        // {
        //   name: '分公司',
        //   valueKey: 'branch',
        //   type: SelectSubCompany
        // },
        {
          name: '施工图设计单位',
          value: 'designUnit',
          type: 'input'
        },
        {
          name: '状态',
          value: 'statusCode',
          type: 'select',
          data: [
            { label: '待提交审核', value: '0' },
            { label: '审核中', value: '1' },
            { label: '审核不通过', value: '2' },
            { label: '变更中', value: '3' },
            { label: '已变更', value: '4' },
            { label: '变更终止', value: '5' }]
        }
      ],
      statusMap: {
        '0': {
          label: '待提交审核',
          color: '#ffc00e'
        },
        '1': {
          label: '审核中',
          color: '#1890ff'
        },
        '2': {
          label: '审核不通过',
          color: '#FE5500'
        },
        '3': {
          label: '变更中',
          color: '#00A854'
        },
        '4': {
          label: '已变更',
          color: 'gray'
        },
        '5': {
          label: '变更终止',
          color: 'gray'
        }
      },
      titleName: '',
      statistics: {}, // 统计参数
      temp: () => {
        return (
          <span style="margin-right: 12px">
          设计变更总数：<span class="totalNum">{this.statistics.total || 0} 个</span> |
          待提交审核：<span class="totalNum">{this.statistics.toReviewNum || 0} 个</span>|
          审核中：<span class="totalNum">{this.statistics.underReviewNum || 0} 个</span> |
          审核不通过：<span class="totalNum">{this.statistics.unReviewNum || 0} 个</span>|
          变更中：<span class="totalNum">{this.statistics.changingNum || 0} 个</span> |
          已变更：<span class="totalNum">{this.statistics.changedNum || 0} 个</span>|
          变更终止：<span class="totalNum">{this.statistics.changeFinishNum || 0} 个</span> |
          已变更减少费用合计：<span class="totalNum">{this.statistics.reduceCost || 0} 万</span>|
          已变更增加费用合计：<span class="totalNum">{this.statistics.increaseCost || 0}万</span>
        </span>
        )
      },
      // 查询参数
      queryParam: {
        startTime: '',
        endTime: ''
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.getDesignTotal()
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getDesignChangeList(requestParameters)
      }
    }
  },

  created() {
    this.getDesignTotal()
  },
  methods: {
    handleApproveDetail(record) {
      this.visibleApprove = true
      this.businessId = record.id
    },
    commitApprove(val) {
      let that = this
      that.$confirm({
        title: '警告提醒！',
        content: '确认提交审核？',
        okType: 'danger',
        onOk() {
          let data = { id: val.id }
          return designChangeFilCommit(data)
            .then((res) => {
              if (res.data.code == 200) {
                that.$message.success('提交成功！')
                that.$refs.table.refresh(true)
              } else {
                that.$message.error('提交失败！')
              }
            })
            .catch((e) => {
              that.$message.error(e)
            })
        },
        onCancel() {
        }
      })
    },
    search(val) {
      this.queryParam = val
      if (this.queryParam.time) {
        this.queryParam.startTime = this.formatDate(val.time[0])
        this.queryParam.endTime = this.formatDate(val.time[1])
      }
      this.$refs.table.refresh(true)
    },
    handelAdd() {
      this.$router.push({ path: '/project/design-changeAdd', query: { isEdit: 'add' } })
    },
    async getDesignTotal() {
      let res = await getDesignTotal(this.queryParam)
      if (res.code === this.SUCCESS_CODE) {
        this.statistics = res.data
      }
    },
    handleDels(val) {
      // 已变更、变更终止状态下，可以查看变更记录，通过showRecord参数控制
      let showRecord = 0
      if (val.statusCode > 3) {
        showRecord = 1
      } else {
        showRecord = 0
      }
      this.$router.push({
        path: '/project/design-changeView',
        query: { id: val.id, isEdit: 'view', showRecord: showRecord }
      })
    },

    handleEdit(val) {
      this.$router.push({ path: '/project/design-changeEdit', query: { id: val.id, isEdit: 'edit' } })
    },

    handleRecord(val) {
      this.$router.push({ path: '/project/design-change-record', query: { id: val.id } })
    }
  }
}
</script>


